<template>
	<view class="grace-upload-shade" @touchmove.stop.prevent="stopFun" :style="{height:shadeShow?'100%':'0px'}">
		<view :class="[showInReal ? 'grace-shade-in' : 'grace-shade-out','grace-upload-box']">
			<view class="grace-upload-boxTop">
				<image src="../../static/upload/huoxing.png"></image>
				<text class="gui-icons" @tap.stop="hideNow">&#xe632;</text>
			</view>
			<view class="grace-upload-boxMiddle">
				<view class="boxMiddle-title">新功能上线啦</view>
				<view class="boxMiddle-text" v-for="(item,index) in bugList.split('@')" v-if="index<6">{{index+1}}、{{item}}</view>
			</view>
			<view class="grace-upload-boxBtn" @tap.stop="goUpload" :class="[progress > 0 && progress < 100 ? 'ganimate' : '']">
				<text>{{(progress > 0 && progress < 100) ? progressText +' '+ progress + '%' : buttonText}}</text>
			</view>
			<view class="race-upload-box-pro" v-if="progress > 0 && progress < 100">
				<text>v{{version}} ➡ v{{newVersion}}</text>
				<text>{{'('+sum1+'/'+sum2+')'}}</text>
			</view>
			<view class="grace-upload-boxBottom">
				<image src="../../static/upload/upbStar.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "graceUpload",
		props: {
			uploadServerUrl: {
				type: String,
				default: ''
			},
			isHomePage:{
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				shadeShow: false, //组件是否展示
				showInReal: false, //中间内容动画
				progress: 0, //进程
				isUpdate: true, //是否更新
				buttonText: "立即更新", //按钮标题
				progressText: '正在更新',
				bytesLength: '', //下载数据长度
				bytesTotalLength: '', //需要下载总长度
				version: '', //当前版本号
				newVersion: '', //新版本号
				downUrl: '',
				bugList: '优化内容，提升用户体验', //更新内容
				isApi: false, //是否点击过，处理网络卡顿导致用户重复点击
			}
		},
		computed: {
			sum1: function() {
				return (this.bytesLength / (1024 * 1024)).toFixed(2) + "MB";
			},
			sum2: function() {
				return (this.bytesTotalLength / (1024 * 1024)).toFixed(2) + "MB";
			}
		},
		methods: {
			goUpload() { //按钮点击事件
				if (this.isApi) return this.$u.msg('正在更新，请耐心等待...')
				if (this.progress == 0) {
					this.isApi = true
					console.log('开始下载。。。');
					const downloadTask = uni.downloadFile({
						url: this.downUrl,
						success: (res) => { 
							if (res.statusCode === 200) {
								this.isApi = false
								this.progress = 100;
								this.buttonText = '下载完成';
								// this.fileUrl = res.tempFilePath;
								plus.runtime.install(res.tempFilePath, {
									force: false
								}, function() {
									console.log('安装成功...');
									plus.runtime.restart();
								}, function(e) {
									console.error('安装失败...');
								});
							}
						}
					});
					downloadTask.onProgressUpdate((res) => {
						console.log('下载进度' + res.progress);
						console.log('已经下载的数据长度' + res.totalBytesWritten);
						console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
						this.bytesLength = res.totalBytesWritten;
						this.bytesTotalLength = res.totalBytesExpectedToWrite;
						this.progress = res.progress;
					});
				}
				// 下载完成后
				else if (this.progress == 100) {
			
				}
			},
			stopFun: function() {}, //防止弹窗下面的内容滚动
			showNow: function() { //显示弹窗
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
					this.version = wgtinfo.version;
					this.$http.get(`${this.uploadServerUrl}`).then(res => {
						uni.hideLoading();
						if (res.data.code != 200) return this.$u.msg(res.data.msg)
						let result = res.data.data
						if (plus.os.name == "Android") {
							let isUpdate = this.compare(result.AndroidVersion, this.version);
							if (!isUpdate && !this.isHomePage) return this.$u.msg('您当前已经是最新版本了。')
							if(isUpdate){
								this.shadeShow = true;
								setTimeout(() => {
									this.showInReal = true;
								}, 10);
								this.newVersion = result.AndroidVersion
								this.downUrl = result.AndroidUpdateUrl
								this.bugList = result.content ? result.content : '优化用户体验，解决部分程序问题！'
							}
						} else {
							let isUpdate2 = this.compare(result.IOSVersion, this.version);
							if (!isUpdate2 && !this.isHomePage) return this.$u.msg('您当前已经是最新版本了。')
							if(isUpdate) return plus.runtime.openURL(result.IOSUpdateUrl);
						}
					})
				
				});
				// #endif
			},
			compare(curV, reqV) {
				if (curV && reqV) {
					//将两个版本号拆成数字
					var arr1 = curV.split('.'),
						arr2 = reqV.split('.');
					var minLength = Math.min(arr1.length, arr2.length),
						position = 0,
						diff = 0;
					//依次比较版本号每一位大小，当对比得出结果后跳出循环（后文有简单介绍）
					while (position < minLength && ((diff = parseInt(arr1[position]) - parseInt(arr2[position])) == 0)) {
						position++;
					}
					diff = (diff != 0) ? diff : (arr1.length - arr2.length);
					//若curV大于reqV，则返回true
					return diff > 0;
				} else {
					//输入为空
					console.log("版本号不能为空");
					return false;
				}
			},
			hideNow: function() { //隐藏弹窗
				this.showInReal = false;
				setTimeout(() => {
					this.shadeShow = false;
				}, 150);
			}
		}
	}
</script>

<style scoped>
	.grace-upload-shade {
		background: rgba(0, 0, 0, .7);
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 9;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.grace-upload-shade .grace-upload-box {
		position: relative;
		border-radius: 12px;
		width: 600rpx;
		min-height: 720rpx;
		background-image: url(../../static/upload/upBg.png);
		background-size: 100% 100%;
		padding-bottom: 30rpx;
	}

	.grace-upload-boxTop {
		text-align: center;
		padding: 20rpx 30rpx 0 30rpx;
		position: relative;
		height: 200rpx;
	}

	.grace-upload-boxTop text {
		font-size: 40rpx;
		color: #FFFFFF;
		position: absolute;
		right: 30rpx;
	}

	.grace-upload-boxTop image {
		width: 250rpx;
		height: 272rpx;
		position: absolute;
		top: -85rpx;
		left: 140rpx;
	}

	.grace-upload-boxMiddle {
		padding: 0 30rpx 0 30rpx;
		min-height: 310rpx;
	}

	.boxMiddle-title {
		font-size: 36rpx;
		text-align: center;
		padding-bottom: 30rpx;
		letter-spacing: 1px;
	}

	.boxMiddle-text {
		padding: 10rpx 0;
		font-size: 28rpx;
	}

	.grace-upload-boxBtn {
		position: relative;
		font-size: 30rpx;
		text-align: center;
		line-height: 3;
		margin: 50rpx 50rpx 0 50rpx;
		border-radius: 30px;
		background: #4992D1;
		color: #FFFFFF;
	}

	.race-upload-box-pro {
		margin: 20rpx 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #B2B2B2;
		font-size: 26rpx;
	}

	@keyframes gradientBG {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.8;
		}

		80% {
			opacity: 1;
		}
	}

	.ganimate {
		animation: gradientBG 1.5s linear infinite;
	}

	.grace-upload-boxBottom image {
		width: 70rpx;
		height: 72rpx;
		position: absolute;
		right: 80rpx;
		bottom: -80rpx;
	}

	.grace-shade-in {
		animation: grace-shade-in-a 150ms ease-in forwards;
	}

	@keyframes grace-shade-in-a {
		0% {
			transform: scale(0.1);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.grace-shade-out {
		animation: grace-shade-out-a 150ms ease-out forwards;
	}

	@keyframes grace-shade-out-a {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		100% {
			transform: scale(0.1);
			opacity: 0;
		}
	}
</style>
